<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="姓名" prop="userName">
                <el-input v-model="userName" placeholder="输入姓名" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>

            <!-- <el-form-item label="选择月份">
        <el-date-picker v-model="beforeDate" type="month" value-format="yyyy-MM" placeholder="选择月"/>
      </el-form-item>
      <el-form-item label="快速日期" prop="dateType">
        <el-select v-model="dateType" placeholder="请选择" clearable>
          <el-option label="天" :value="1"></el-option>
          <el-option label="周" :value="2"></el-option>
          <el-option label="月" :value="3"></el-option>
          <el-option label="季" :value="4"></el-option>
          <el-option label="年" :value="5"></el-option>
        </el-select>
      </el-form-item> -->
            <el-form-item label="开始日期">
                <el-date-picker v-model="startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="appraisalList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column align="center" prop="userName">
                <template slot="header">
                    <span>用户名</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="roleName">
                <template slot="header">
                    <span>角色</span>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="totalOrders">
                <template slot="header">
                    <span>总单量</span>
                    <el-tooltip content="工作台内包含的总订单数量" cement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="undevelopedCount">
                <template slot="header">
                    <span>未开发数</span>
                    <el-tooltip content="状态为待抢单的订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="developedCount">
                <template slot="header">
                    <span>已开发数</span>
                    <el-tooltip content="订单状态为重包单和进行中的订单" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="unexpiredTransferCount">
                <template slot="header">
                    <span>移交数</span>
                    <el-tooltip content="订单状态为未过售后期的订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="unexpiredTotalPrice">
                <template slot="header">
                    <span>移交总价</span>
                    <el-tooltip content="订单状态为未过售后期的订单总价之和" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="finalDealCount">
                <template slot="header">
                    <span>交付数</span>
                    <el-tooltip content="订单状态为已完成的订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="finalDealPriceDifference">
                <template slot="header">
                    <span>交付价</span>
                    <el-tooltip content="订单状态为已完成的订单价-包单价" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="yellowOrderCount">
                <template slot="header">
                    <span>黄单数</span>
                    <el-tooltip content="订单状态为已退单的订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column align="center" prop="yellowOrderRate">
                <template slot="header">
                    <span>黄单率</span>
                    <el-tooltip content="订单状态为已退单的订单概率(CF: 订单状态为已退单的数量 / 订单总数量)" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    {{ isNaN(parseFloat(scope.row.yellowOrderRate)) ? '' : (parseFloat(scope.row.yellowOrderRate) *
                        100).toFixed(2) + '%' }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="serviceChargeCount">
                <template slot="header">
                    <span>服务费数</span>
                    <el-tooltip content="订单状态为服务费的订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="serviceChargeTotalPrice">
                <template slot="header">
                    <span>服务费利润</span>
                    <el-tooltip content="状态为服务费的订单已收服务费价格" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="serviceChargePriceDifference">
                <template slot="header">
                  <span>服务差价</span>
                  <el-tooltip content="订单状态为服务费的订单与总单金额的差价(CF： 总订单总金额 - 服务费总金额)" placement="top">
                    <svg-icon icon-class="_问号小" class="question-icon" />
                  </el-tooltip>
                </template>
              </el-table-column> -->
            <el-table-column align="center" prop="sendOrdersPriceDifference">
                <template slot="header">
                    <span>包单率</span>
                    <el-tooltip content="订单状态为进行中,未过售后期,已完成的订单数量 / 总订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    {{ isNaN(parseFloat(scope.row.sendOrdersPriceDifference)) ? '' :
                        (parseFloat(scope.row.sendOrdersPriceDifference) * 100).toFixed(2) + '%' }}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="transactionPriceDifference">
                <template slot="header">
                    <span>成交率</span>
                    <el-tooltip content="订单状态为已完成的订单数量 / 总订单数量" placement="top">
                        <svg-icon icon-class="_问号小" class="question-icon" />
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    {{ isNaN(parseFloat(scope.row.transactionPriceDifference)) ? '' :
                        (parseFloat(scope.row.transactionPriceDifference) * 100).toFixed(2) + '%' }}
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>
import { getOrderDataByUser } from "@/api/manager/orders"

export default {
    name: "ManagerOrders",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 绩效考核结果表格数据
            appraisalList: [],
            // 弹出层标题
            title: "",
            beforeDate: null,
            userName: null,
            dateType: null,
            startTime: null,
            endTime: null,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                params: {}
            },
            // 表单参数
            form: {},
        }
    },
    created() {
        this.getList()
    },
    methods: {
        /** 查询绩效考核结果列表 */
        getList() {
            this.loading = true
            this.queryParams.params = {}
            if (null != this.beforeDate && '' != this.beforeDate) {
                this.queryParams.params["beforeDate"] = this.beforeDate
            }
            if (null != this.userName && '' != this.userName) {
                this.queryParams.params["userName"] = this.userName
            }
            if (this.dateType) {
                this.queryParams.params["dateType"] = this.dateType
            }
            if (null != this.startTime && '' != this.startTime) {
                this.queryParams.params["startTime"] = this.startTime
            }
            if (null != this.endTime && '' != this.endTime) {
                this.queryParams.params["endTime"] = this.endTime
            }
            getOrderDataByUser(this.queryParams).then(response => {
                this.appraisalList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.queryParams.params = {},
                this.beforeDate = null,
                this.userName = null,
                this.dateType = null,
                this.startTime = null,
                this.endTime = null,
                this.resetForm("queryForm")
            this.handleQuery()
        },
    }
}
</script>

<style scoped>
.question-icon {
    margin-left: 5px;
    cursor: pointer;
    font-size: 16px;
    vertical-align: text-bottom;
    /* 修改为text-bottom以确保与文本底部对齐 */
    position: relative;
    top: -1px;
    /* 微调图标位置，使其与文本更好地对齐 */
}
</style>
